<template>
  <div>
    <h1 v-if="data.title">
      {{ data.title }}
    </h1>
    <div class="zeda-total">
      <span
        v-for="(item, index) in data.config"
        :key="index"
        class="total-text"
      >
        {{ item.label }}：
        <em>{{ item.value | toMoney(item.formatMoney) }}</em>
        {{
          item.value !== undefined && String(item.value).length > 0
            ? item.unit
              ? item.unit
              : data.unit
            : ""
        }}
      </span>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { formatMoney } from "@/utils";
export default {
  filters: {
    toMoney(val, format = true) {
      return val !== undefined && String(val).length > 0
        ? format
          ? formatMoney(val, ",")
          : val
        : "-";
    },
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          config: [],
          unit: "",
        };
      },
    },
  },
};
</script>
<style lang="scss" scoped>
h1 {
  text-align: center;
}
.zeda-total {
  margin: 16px 0;
  background: #fff6f0;
  border: 1px solid #f7cebb;
  border-radius: 4px;
  line-height: 30px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .total-text {
    padding-right: 20px;
    font-size: 12px;
    color: #0c1331;
    em {
      font-style: normal;
      color: #ec6324;
      font-size: 14px;
    }
  }
}
</style>
